<template>
  <el-card class="container mg-t-20">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="`全部（${totalAll}）`" name="all" >
        <payrollRecordOwn @total="getTotal($event, 'All')"/>
      </el-tab-pane>
      <el-tab-pane :label="`已领薪（${totalPaid}）`" name="paid" >
        <salaryPaid ref="salaryPaid" @total="getTotal($event, 'Paid')"/>
      </el-tab-pane>
      <el-tab-pane :label="`待领薪（${totalWill}）`" name="will">
        <salaryWillPay @total="getTotal($event, 'Will')"/>
      </el-tab-pane>
      <el-tab-pane :label="`停止发薪（${totalStop}）`"  name="stop">
        <salaryStop @total="getTotal($event, 'Stop')"/>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import payrollRecordOwn from '../../payroll-record-own.vue'
import salaryPaid from './salary-paid.vue'
import salaryWillPay from './salary-will-pay.vue'
import salaryStop from './salary-stop.vue'
import router from "@/router"
import {ElMessageBox} from "element-plus"

export default defineComponent({
  name: 'Pay',
  components: {
    payrollRecordOwn,
    salaryPaid,
    salaryWillPay,
    salaryStop
  },
  data() {
    return {
      activeName: 'all',
      totalAll: 0,
      totalPaid: 0,
      totalWill: 0,
      totalStop: 0
    }
  },
  beforeMount() {
    // 被跳转到该页面恢复原页面数据
    if (/tip/.test(router.options.history.base)) {
      ElMessageBox.alert('回单正在下载中，您可以在该界面继续操作')
      const channel = new BroadcastChannel('new_tab_payroll')
      let isLoad = 0
      channel.onmessage = e => {
        const data = JSON.parse(e.data)
        this.activeName = 'paid'
        isLoad = 1
        channel.postMessage('payroll_close')
        channel.close()
        ;(this as any).$refs.salaryPaid.searchList = data
        ;(this as any).$refs.salaryPaid.getData()
      }
      setTimeout(() => {
        if (!isLoad) {
          window.location.search = ''
        }
        channel.close()
      }, 5000)
    }
  },
  mounted() {
    if (this.$route?.query?.type){
      (this as any).activeName = this.$route.query.type
    }
  },
  methods: {
    handleClick(ev: string) {
      // console.log(3333333, ev)
    },
    getTotal(ev: any, type: string) {
      (this as any)[`total${type}`] = ev
    }
  }

})
</script>

<style scoped lang="stylus">

</style>
